<template>
  <div>
    <a-cascader
      v-model:value="value"
      :options="options"
      placeholder="Please select"
      size="large"
    />
    <hr>

    {{ text }} &nbsp;
    <hr>
    <a-cascader
      v-model:value="text
      "
      placeholder="Please select"
      :options="options"
      @change="onChange"
      expand-trigger="hover"
      change-on-select
      style="width:500px"
      show-search
    >

      <!-- <a href="#">Change city</a> -->
      <template #displayRender="{ labels, selectedOptions }">
        <span
          v-for="(label, index) in labels"
          :key="selectedOptions[index].value"
        >
          <span v-if="index === labels.length - 1">
            {{ label }} (
            <a @click="e => handleAreaClick(e, label, selectedOptions[index])">
              {{ selectedOptions[index].code }}
            </a>
            )
          </span>
          <span v-else>{{ label }} /</span>
        </span>
      </template>

    </a-cascader>
    <hr>

    <a-cascader
      v-model:value="value1"
      :options="options1"
      placeholder="Please select"
      :load-data="loadData"
    >
      <template #suffixIcon>这里放图标</template>
    </a-cascader>
    <hr>

    <a-cascader
      :options="options2"
      placeholder="Please select"
      :field-names="{ label: 'name', value: 'code', children: 'items' }"
      multiple
    >
      <template #tagRender="data">
        <a-tag
          :key="data.value"
          color="blue"
        >{{ data.label }}</a-tag>
      </template>
    </a-cascader>
    <hr>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      text: '',
      value: '',
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                  code: 752100,
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                  code: 453400,
                },
              ],
            },
          ],
        },
      ],

      value1: '',
      options1: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          isLeaf: false,
        }, {
          value: 'jiangsu',
          label: 'Jiangsu',
          isLeaf: false,
        }
      ],

      options2: [
        {
          code: 'zhejiang',
          name: 'Zhejiang',
          items: [{
            code: 'hangzhou',
            name: 'Hangzhou',
            items: [{
              code: 'xihu',
              name: 'West Lake',
            }],
          }],
        }, {
          code: 'jiangsu',
          name: 'Jiangsu',
          items: [{
            code: 'nanjing',
            name: 'Nanjing',
            items: [{
              code: 'zhonghuamen',
              name: 'Zhong Hua Men',
            }],
          }],
        }
      ],
    }
  },
  created() { },
  mounted() { },
  methods: {
    onChange() {

    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      // load options lazily
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [{
          label: `${targetOption.label} Dynamic 1`,
          value: 'dynamic1',
        }, {
          label: `${targetOption.label} Dynamic 2`,
          value: 'dynamic2',
        }];
        this.options1 = [...this.options1];
      }, 1000);

    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
